<!--
 * @FileDescription 选项
 * @Author 杨宇翔
 * @Date 20220706 10:28:40
 * @LastEditors 杨宇翔
 * @LastEditTime 20220706 10:28:40
-->
<template>
    <div class="options">
        <button class="reset" type="button" @click="UsageComponent.Default.ShowTracePlot.value = true">
            <span></span>
            <span>运动轨迹</span>
        </button>
        <button class="reset" type="button">
            <span></span>
            <span>路径规划</span>
        </button>
        <button class="reset" type="button" @click="UsageComponent.Default.ShowGPSLocation.value = true">
            <span></span>
            <span>卫星定位</span>
        </button>
    </div>
</template>

<script setup lang="ts">
import { UsageComponent } from './InertialNavigationComponent';
</script>

<style scoped>
.options {
    grid-area: options;

    background-color: #0d0d14;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

button>span:first-of-type {
    display: inline-block;
    width: 7.4rem;
    height: 7.4rem;

    background-repeat: no-repeat;
    background-size: 100% 100%;
}

button:nth-of-type(1)>span:first-of-type {
}

button:nth-of-type(2)>span:first-of-type {
}

button:nth-of-type(3)>span:first-of-type {
}

button:nth-of-type(1):hover>span:first-of-type {
}

button:nth-of-type(2):hover>span:first-of-type {
}

button:nth-of-type(3):hover>span:first-of-type {
}

button>span:last-of-type {
    color: #81859C;
    font-size: 1.6rem;
    font-weight: 500;
}
</style>